<template>
  <div class="main">
    <div v-if="dataModelBase.title" class="title">
      {{ dataModelBase.titleName }}
    </div>

    <div class="echart">
      <v-chart ref="echarts" :option="option" :loading="loading" />
    </div>
  </div>
</template>

<script>
import widget from '@/mixins/widget'

export default {
  mixins: [widget],
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 0
            }
          },
          offset: 8,
          data: []
        },
        yAxis: {
          type: 'value',
          splitNumber: 3
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            height: 5,
            start: 35,
            end: 65,
            bottom: 35,
            showDetail: false,
            showDataShadow: false,
            brushSelect: false,
            fillerColor: 'rgba(204,209,227,1)',
            borderColor: 'rgba(219,224,242,1)',
            backgroundColor: 'rgba(255,255,255,1)'
          }
        ],
        grid: {
          left: '10%',
          top: '20%',
          right: '10%',
          bottom: '20%'
        },
        series: {
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: 'rgba(84,142,247,0)' },
              { offset: 0, color: 'rgba(82,138,252,1)' }
            ])
          },
          data: []
        }
      }
    }
  },

  methods: {
    async getData() {
      await this.$nextTick()
      const res = await this.httpRequest(this.interactParams)
      if (res) {
        this.option.xAxis.data = res.xAxisData
        this.option.series.data = res.seriesData
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  font-size: 14px;
  .title {
    height: 45px;
    line-height: 45px;
    padding: 0 13px;
    border: 1px solid #e9e9e9;
    border-bottom: none;
  }
  .echart {
    height: calc(100% - 45px);
    border: 1px solid #e9e9e9;
  }
}
</style>
